@import './variables.scss';

// 响应式断点
@mixin respond-to($breakpoint) {
  @if $breakpoint == xs {
    @media (max-width: $breakpoint-xs) { @content; }
  } @else if $breakpoint == sm {
    @media (max-width: $breakpoint-sm) { @content; }
  } @else if $breakpoint == md {
    @media (max-width: $breakpoint-md) { @content; }
  } @else if $breakpoint == lg {
    @media (max-width: $breakpoint-lg) { @content; }
  } @else if $breakpoint == xl {
    @media (max-width: $breakpoint-xl) { @content; }
  } @else if $breakpoint == xxl {
    @media (max-width: $breakpoint-xxl) { @content; }
  }
}

// 颜色调整
@mixin lighten-color($color, $amount: 10%) {
  background-color: lighten($color, $amount);
  border-color: lighten($color, $amount);
}

@mixin darken-color($color, $amount: 10%) {
  background-color: darken($color, $amount);
  border-color: darken($color, $amount);
}

// 布局
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

@mixin flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

// 间距
@mixin margin($value) {
  margin: $value;
}

@mixin margin-x($value) {
  margin-left: $value;
  margin-right: $value;
}

@mixin margin-y($value) {
  margin-top: $value;
  margin-bottom: $value;
}

@mixin padding($value) {
  padding: $value;
}

@mixin padding-x($value) {
  padding-left: $value;
  padding-right: $value;
}

@mixin padding-y($value) {
  padding-top: $value;
  padding-bottom: $value;
}

// 文本对齐
@mixin text-center {
  text-align: center;
}

@mixin text-left {
  text-align: left;
}

@mixin text-right {
  text-align: right;
}

// 阴影
@mixin box-shadow {
  box-shadow: $box-shadow-base;
}

@mixin card-shadow {
  box-shadow: $box-shadow-card;
}

// 圆角
@mixin border-radius {
  border-radius: $border-radius-base;
}

@mixin border-radius-sm {
  border-radius: $border-radius-sm;
}

@mixin border-radius-lg {
  border-radius: $border-radius-lg;
}

// 过渡动画
@mixin transition($property: all, $duration: $animation-duration-base) {
  transition: $property $duration ease-in-out;
}

// 清除浮动
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 文本溢出省略
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin text-ellipsis-multi($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 滚动条样式
@mixin scrollbar {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: $gray-2;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: $gray-4;
    border-radius: 3px;
    
    &:hover {
      background: $gray-5;
    }
  }
}

// 按钮样式
@mixin button-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-sm $spacing-md;
  border: 1px solid transparent;
  border-radius: $border-radius-base;
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  line-height: $line-height-base;
  cursor: pointer;
  transition: all $animation-duration-base ease-in-out;
  
  &:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }
}

// 输入框样式
@mixin input-base {
  width: 100%;
  padding: $spacing-sm $spacing-md;
  border: 1px solid $border-color-base;
  border-radius: $border-radius-base;
  font-size: $font-size-sm;
  line-height: $line-height-base;
  transition: all $animation-duration-base ease-in-out;
  
  &:focus {
    outline: none;
    border-color: $primary-color;
    box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
  }
  
  &:disabled {
    background-color: $gray-1;
    cursor: not-allowed;
  }
}

// 卡片样式
@mixin card-base {
  background: $white;
  border-radius: $border-radius-base;
  box-shadow: $box-shadow-card;
  overflow: hidden;
}

// 表格样式
@mixin table-base {
  width: 100%;
  border-collapse: collapse;
  
  th, td {
    padding: $spacing-md;
    text-align: left;
    border-bottom: 1px solid $border-color-split;
  }
  
  th {
    background-color: $gray-1;
    font-weight: $font-weight-semibold;
  }
  
  tr:hover {
    background-color: $gray-1;
  }
}

// 弹性布局混合器
@mixin flex-column {
  display: flex;
  flex-direction: column;
}

@mixin flex-column-center {
  @include flex-column;
  align-items: center;
  justify-content: center;
}

// 阴影混合器
@mixin box-shadow($shadow: $box-shadow-base) {
  box-shadow: $shadow;
}

@mixin card-shadow {
  @include box-shadow($box-shadow-card);
}

// 过渡动画混合器
@mixin transition-fast {
  @include transition(all, $animation-duration-fast);
}

@mixin transition-slow {
  @include transition(all, $animation-duration-slow);
}

// 文本混合器
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin text-ellipsis-multi($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 响应式混合器
@mixin respond-above($breakpoint) {
  @if $breakpoint == xs {
    @media (min-width: $breakpoint-xs) { @content; }
  } @else if $breakpoint == sm {
    @media (min-width: $breakpoint-sm) { @content; }
  } @else if $breakpoint == md {
    @media (min-width: $breakpoint-md) { @content; }
  } @else if $breakpoint == lg {
    @media (min-width: $breakpoint-lg) { @content; }
  } @else if $breakpoint == xl {
    @media (min-width: $breakpoint-xl) { @content; }
  }
}

// 定位混合器
@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin fixed-center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 按钮混合器
@mixin button-primary {
  @include button-base;
  background-color: $primary-color;
  color: $white;
  
  &:hover {
    background-color: lighten($primary-color, 10%);
  }
}

@mixin button-secondary {
  @include button-base;
  background-color: transparent;
  border: 1px solid $border-color-base;
  color: $text-color;
  
  &:hover {
    border-color: $primary-color;
    color: $primary-color;
  }
}

// 模态框混合器
@mixin modal-base {
  @include border-radius-lg;
  @include card-shadow;
  
  .ant-modal-header {
    @include padding($spacing-lg);
    border-bottom: 1px solid $border-color-split;
  }
  
  .ant-modal-body {
    @include padding($spacing-lg);
  }
  
  .ant-modal-footer {
    @include padding($spacing-lg);
    border-top: 1px solid $border-color-split;
  }
}

// 加载状态混合器
@mixin loading-container {
  @include flex-column-center;
  @include padding($spacing-xxl);
  min-height: 200px;
}

// 错误状态混合器
@mixin error-container {
  @include flex-column-center;
  @include padding($spacing-xxl);
  color: $error-color;
}

// 空状态混合器
@mixin empty-container {
  @include flex-column-center;
  @include padding($spacing-xxl);
  color: $text-color-secondary;
}

// 动画混合器
@mixin fade-in {
  animation: fadeIn $animation-duration-slow ease-in-out;
}

@mixin slide-in-up {
  animation: slideInUp $animation-duration-slow ease-out;
}

@mixin scale-in {
  animation: scaleIn $animation-duration-base ease-out;
}

// 工具类混合器
@mixin hidden {
  display: none;
}

@mixin visible {
  display: block;
}

@mixin sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
} 